import React, { Component } from 'react'
import './index.css'
import { connect } from 'react-redux';
import { editCartAction } from '../../store/actions/cart';
import { preOrder } from '../../api/order';
class Cart extends Component {
    constructor() {
        super();
        this.state = {
            sum: 0
            // num: 0
        }
    }
    componentDidMount() {
        this.getSum();
    }
    editCart(id, type, ev) {
        ev.stopPropagation();
        const list = [...this.props.cart];
        const editIndex = list.findIndex((val) => val.id === id);
        if (type === 1) {
            list[editIndex].num++;
        }
        else if (type === -1) {
            if (list[editIndex].num > 1) {
                list[editIndex].num--;
            }
        }
        this.props.editCartAction(list);
    }
    gotoItem = (id) => {
        this.props.history.push('/item/' + id);
    }
    checkItemChange = (ev, id) => {
        let list = [...this.props.cart];
        list = list.map((item) => {
            if (item.id === id) {
                item.checked = ev.target.checked;
            }
            return item;
        })
        this.props.editCartAction(list);
        this.getSum();
    }
    getSum = () => {
        let sum = 0;
        let num = 0;
        this.props.cart.forEach(item => {
            if (item.checked) {
                sum += item.price * item.num;
                num += item.num;
            }
        });
        return [sum, num];
    }
    allCheck = (ev) => {
        let list = [...this.props.cart];
        list = list.map((item) => {
            item.checked = ev.target.checked;
            return item;
        })
        this.props.editCartAction(list);
        this.getSum();
    }
    jiesuanFn = () => {
        const list = [...this.props.cart];
        let cartId = [];
        let cartList = [];
        list.forEach(item => {
            if (item.checked) {
                cartId.push(item.cartId);
                cartList.push(item);
            }
        })
        preOrder({
            cartId: cartId, totalMoney: this.state.sum
        }).then(res => {
            if (res.data.code === 666) {
                let [sum] = this.getSum();
                this.props.history.push({
                    pathname: "ordersubmit", state: {
                        cartList, preOrderId: res.data.result.preOrderId, sum
                    }
                })
            }
        })
    }
    render() {
        let { cart } = this.props;
        let [sum, num] = this.getSum();
        console.log(cart);
        return <div className='cart-page'>
            {cart.length === 0 ? <div>购物车零食已告急....</div> : <><ul>
                {cart.map((item, index) => <li key={index} onClick={() => { this.gotoItem(item.id) }}>
                    <div className="check"><input type="checkbox" onChange={(e) => { this.checkItemChange(e, item.id) }} checked={item.checked} onClick={(ev) => { ev.stopPropagation() }} /></div>
                    <div className="img" style={{ backgroundImage: `url(${item.pic})` }}></div>
                    <div className="con">
                        <div className="name">{item.name}</div>
                        <div className="info">{item.displayName}</div>
                        <div className="price-wrap">
                            <div className="goodsprice">
                                <span style={{
                                    fontSize: '12px',
                                    color: 'rgb(241, 37, 37)'
                                }}>￥</span>
                                <span>{item.price}</span>
                            </div>
                            <div className="input-box">
                                <span onClick={(ev) => { this.editCart(item.id, -1, ev) }}>-</span>
                                <input type="text" value={item.num} readOnly />
                                <span onClick={(ev) => { this.editCart(item.id, 1, ev) }}>+</span>
                            </div>
                        </div>
                    </div>
                </li>)}
            </ul>
                <div className="sumbar">
                    <div className="selected"><input type="checkbox" id="all-checked" checked={cart.length && cart.every(v => v.checked)} onClick={this.allCheck} /><span style={{ marginLeft: '10px' }}>已选(</span><span
                        className="total-num">{num}</span><span>)</span></div>
                    <div className="total"><span style={{ color: '#85868a' }}>不含运费</span> <span>合计</span> <span
                        className="price-num">￥</span><span className="price-num1" style={{ fontSize: '14px', fontWeight: 700 }}>{sum.toFixed(2)}</span>
                    </div>
                    <div className="btn" onClick={this.jiesuanFn}>
                        去结算(
                        <span className="total-num">{num}</span>
                        <span>)</span>
                    </div>
                </div>
            </>
            }
        </div>

    }
}
export default connect(
    state => ({ cart: state.cart }),
    { editCartAction }
)(Cart);
